import { Canvas, Meta, Controls, Source } from '@storybook/addon-docs/blocks';

import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.

## Import

<Source
  language="tsx"
  dark={true}
  code={`
import { Button } from '@storybook/components';

// If you would like to use icons, please import them from the icons library
import { FaceHappyIcon, HeartIcon } from '@storybook/icons'
`} />

## Usage

To ensure Buttons are accessible, the `ariaLabel` prop must contain a label to be read by screen readers. When your Button's content already contains text, this prop is not necessary. You can set `ariaLabel` to `false` to declare that the Button's children is already readable by screen readers.

<Source
  language="tsx"
  dark={true}
  code={`
// Using the onClick event handler
<Button ariaLabel={false} onClick={() => {}}>Hello world!</Button>

  // Using the asChild prop to render a custom child
  <Button ariaLabel={false} asChild>
    <a href="https://storybook.js.org">Hello world!</a>
  </Button>
`} />
<Canvas of={ButtonStories.Base} />
<Controls />

### Button sizes

Use the `size` prop to change the size of the button. You can set the value to `small` or `medium`.

<Canvas of={ButtonStories.Sizes} />
<Source
  language="tsx"
  dark={true}
  code={`
<Button ariaLabel={false} size="small">Small Button</Button>
<Button ariaLabel={false} size="medium">Medium Button</Button>
`} />

### Button variants

Use the `variant` prop to change the visual style of the button. You can set the value to `outline`, `solid` or `ghost`.

<Canvas of={ButtonStories.Variants} />
<Source
  language="tsx"
  dark={true}
  code={`
<Button variant="outline">Outline</Button>
<Button variant="solid">Solid</Button>
<Button variant="Ghost">Ghost</Button>
`} />

### Button with icon

You can add an icon to the button by adding the icon on the left of the text. Please use any icon from the icon library `@storybook/icons`. You can still set `ariaLabel` to `false` if the button's text fully conveys the meaning of the button. If the icon is necessary to understand the button's purpose, you should pass a more meaningful text to `ariaLabel`.

<Canvas of={ButtonStories.WithIcon} />
<Source
  language="tsx"
  dark={true}
  code={`
<Button ariaLabel={false}>
  <FaceHappyIcon /> Button
</Button>
`} />

### Icon only buttons

You can also use the button as an icon only button by removing the text. To make sure the button is square, please set the padding prop to `small`. You must pass an `ariaLabel` prop to ensure the button is accessible. The `ariaLabel` should describe the action that will be performed when the button is clicked, such as "Like" or "Delete". The Button will automatically display a tooltip based on the `ariaLabel`'s content when hovered.

<Canvas of={ButtonStories.IconOnly} />
<Source
  language="tsx"
  dark={true}
  code={`
<Button ariaLabel="Button" padding="small">
  <FaceHappyIcon />
</Button>
`} />

### Button with custom wrapper

If you want to use a custom wrapper to set the button as an external link or to use your custom router, you can use the `asChild` prop. This will render the button as a child of the wrapper.

<Canvas of={ButtonStories.WithHref} />
<Source
  language="tsx"
  dark={true}
  code={`
<Button ariaLabel={false} asChild>
  <a href="https://storybook.js.org">Hello world!</a>
</Button>
<Button ariaLabel={false} asChild>
  <Link href='/home'>Hello world!</Link>
</Button>
`} />

### Button with animations

You can use the `animate` prop to add animations to the button. You can set the value to `glow`, `jiggle` or `rotate360`.

<Canvas of={ButtonStories.Animated} />
<Source
  language="tsx"
  dark={true}
  code={`
<Button ariaLabel={false} animation="glow">
  <FaceHappyIcon />Button
</Button>
<Button ariaLabel={false} animation="jiggle">
  <FaceHappyIcon />Button
</Button>
<Button ariaLabel={false} animation="rotate360">
  <FaceHappyIcon />Button
</Button>
`} />

### Disabled button

You can use the `disabled` prop to set the button as disabled.

<Canvas of={ButtonStories.Disabled} />
<Source
  language="tsx"
  dark={true}
  code={`
<Button ariaLabel={false} disabled>
  <FaceHappyIcon />Button
</Button>
 `}
/>